<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>flexbox布局调试工具</title>
    <link rel="stylesheet" href="./flexbox/styles.css">
    <style rel="stylesheet" id="networkDiskToolsDiscernWPURLStyle">
        .networkDiskTools-link-wrapper {
            display: inline !important;
            word-break: break-all !important;
        }

        .networkDiskTools-link-wrapper a,
        .networkDiskTools-link-wrapper img {
            transition: opacity .3s !important;
        }

        .networkDiskTools-link-wrapper a:hover,
        .networkDiskTools-link-wrapper img:hover {
            text-decoration: underline !important;
        }

        .networkDiskTools-link-wrapper.brock a {
            text-decoration: line-through !important;
            color: #d8d8d8 !important;
        }

        .networkDiskTools-link-wrapper.locked a {
            color: forestgreen !important;
        }

        .networkDiskTools-link-wrapper.ok a {
            color: forestgreen !important;
            transition: opacity .3s !important;
        }

        .networkDiskTools-link-wrapper img.iconfont {
            display: inline !important;
            width: 14px !important;
            margin: 0 3px 0 0 !important;
        }
    </style>
    <link id="networkDiskToolsIconfontLink" rel="stylesheet" type="text/css"
        href="./flexbox/font_1195811_wvahqlnfkan.css">
    <style data-styled="active" data-styled-version="5.0.0-beta.8"></style>
    <style rel="stylesheet" id="networkDiskToolsDiscernOtherURLStyle">
        .networkDiskTools-link-wrapper {
            display: inline !important;
            word-break: break-all !important;
        }

        .networkDiskTools-link-wrapper,
        .networkDiskTools-link-wrapper span {
            transition: opacity .3s !important;
        }

        .networkDiskTools-link-wrapper:hover,
        .networkDiskTools-link-wrapper span:hover {
            text-decoration: underline !important;
        }

        .networkDiskTools-link-wrapper.magnet span {
            color: #ffffff !important;
            background-color: #a06e37 !important;
            border-radius: 50%;
            text-decoration: none;
        }

        .networkDiskTools-link-wrapper.thunder span {
            color: #3965cc !important;
            background-color: #ffffff !important;
            border-radius: 50%;
            text-decoration: none;
        }

        .networkDiskTools-link-wrapper .wpIcon {
            display: inline !important;
            width: 14px !important;
            margin: 0 3px 0 0 !important;
        }
    </style>
</head>

<body>
    <div class="page-heading">CSS Flexbox规则</div>
    <div class="child-count-container">
        <div class="control-heading child-count-info">Change child count</div>
        <input id="ChildCount" class="child-count-slider" type="range" min="1" max="8" value="8">
    </div>
    <div class="flex-parent" style="flex-flow: row nowrap; place-content: stretch flex-start; align-items: stretch;">
        <div class="flex-child" style="background-color: #46DBFF;">1</div>
        <div class="flex-child" style="background-color: #2CD6FF;">2</div>
        <div class="flex-child" style="background-color: #13D1FF;">3</div>
        <div class="flex-child" style="background-color: #00C8F8;">4</div>
        <div class="flex-child" style="background-color: #00C8F8;">5</div>
        <div class="flex-child" style="background-color: #00B3DF;">6</div>
        <div class="flex-child" style="background-color: #009FC5;">7</div>
        <div class="flex-child" style="background-color: #008AAC;">8</div>
    </div>
    <div class="controls-container row-is-selected">
        <div class="flex-attribute-control flex-direction">
            <div class="control-heading">flex-direction</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="flex-direction" value="row" checked="">
                    row (default)
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="row-reverse">
                    row-reverse
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="column">
                    column
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="column-reverse">
                    column-reverse
                </label>
            </div>
        </div>
        <div class="flex-attribute-control flex-wrap">
            <div class="control-heading">flex-wrap</div>
            <div class="control-explanation">whether items wrap to the next <span class="if-row">row</span><span
                    class="if-column">column</span> (only applies if combined <span class="if-row">width</span><span
                    class="if-column">height</span> of items is greater than container's)</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="flex-wrap" value="nowrap" checked="">
                    nowrap (default)
                </label>
                <label>
                    <input type="radio" name="flex-wrap" value="wrap">
                    wrap
                </label>
                <label>
                    <input type="radio" name="flex-wrap" value="wrap-reverse">
                    wrap-reverse
                </label>
            </div>
        </div>
        <div class="flex-attribute-control justify-content">
            <div class="control-heading">justify-content</div>
            <div class="control-explanation">alignment along the <span class="if-row">x</span><span
                    class="if-column">y</span> axis</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="justify-content" value="flex-start" checked="">
                    flex-start (default)
                </label>
                <label>
                    <input type="radio" name="justify-content" value="flex-end">
                    flex-end
                </label>
                <label>
                    <input type="radio" name="justify-content" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="justify-content" value="space-around">
                    space-around
                </label>
                <label>
                    <input type="radio" name="justify-content" value="space-between">
                    space-between
                </label>
            </div>
        </div>
        <div class="flex-attribute-control align-items">
            <div class="control-heading">align-items</div>
            <div class="control-explanation">alignment along the <span class="if-row">y</span><span
                    class="if-column">x</span> axis</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="align-items" value="stretch" checked="">
                    stretch (default)
                </label>
                <label>
                    <input type="radio" name="align-items" value="baseline">
                    baseline
                </label>
                <label>
                    <input type="radio" name="align-items" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="align-items" value="flex-start">
                    flex-start
                </label>
                <label>
                    <input type="radio" name="align-items" value="flex-end">
                    flex-end
                </label>
            </div>
        </div>
        <div class="flex-attribute-control align-content">
            <div class="control-heading">align-content</div>
            <div class="control-explanation">only applies if there is more than one <span class="if-row">row</span><span
                    class="if-column">column</span> of items</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="align-content" value="stretch" checked="">
                    stretch (default)
                </label>
                <label>
                    <input type="radio" name="align-content" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="align-content" value="flex-start">
                    flex-start
                </label>
                <label>
                    <input type="radio" name="align-content" value="flex-end">
                    flex-end
                </label>
                <label>
                    <input type="radio" name="align-content" value="space-around">
                    space-around
                </label>
                <label>
                    <input type="radio" name="align-content" value="space-between">
                    space-between
                </label>
            </div>
        </div>
    </div>
    <div class="preview-container">
        <div class="control-heading">CSS OUTPUT</div>
        <pre class="preview">{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}</pre>
    </div>
    <div class="contact">
        博客: <a href="https://jszhai.cn">@jszhai.cn</a>
    </div>
    </script>
    <script src="./flexbox/main.js"></script>

    <div style="z-index: 10000;position: relative;" id="networkDiskToolsOtherLinkMenu">
        <div class="sc-AykKE jiZwhX"></div>
    </div>
    <div id="__nightingale_view_cover"
        style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out 0s; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; background: rgb(0, 0, 0) !important; pointer-events: none !important; z-index: 2147483647; opacity: 0;">
    </div>
</body>

</html>